<!DOCTYPE html>
<html>

    <head>
        <title>Web QR Redirect</title>
        <script type="text/javascript" src="js/instascan.min.js"></script>
		<link rel="stylesheet" href="css/mui.min.css">
		<script src="js/mui.min.js"></script>
        <style>
            body {
            margin: 0;
            padding: 0;
            overflow:hidden;
            }
            #preview {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            min-width: 100%; 
            min-height: 80%;
            margin: auto;
            overflow: auto;
            }
        </style>
    </head>

    <body>
        <video id="preview" style="height: 80%"></video>
        <input type="button" value="关闭摄像头" id="close" style="height:80px">
        <script type="text/javascript">
            const isValidQr = (string) => {
			
            	
			   var json = JSON.parse(string);
			   
			   if(json.serialNo && json.roomNo && json.rackNo && json.manufacturer && json.typeNo){
				   mui.alert('添加 【' + json.serialNo + '】成功', '欢迎使用扫码功能', function() {
				   });
			   }
			   else{
				  mui.alert("【" + string + '】格式错误', '欢迎使用扫码功能', function() {
				  }); 
			   }
			   
                return false;
                
            }

            let scanner = new Instascan.Scanner({
                video: document.getElementById('preview'),
                mirror: false
            });
            scanner.addListener('scan', function(content) {
                if (isValidQr(content)) {
                    window.location.replace(content);
                }
				// scanner.stop();
            });
			document.getElementById("close").addEventListener('tap', function() {
				scanner.stop();
			});
			
            Instascan.Camera.getCameras().then(function(cameras) {
                if (cameras.length > 0) {
                    if (cameras.length == 2) {
                        scanner.start(cameras[1]);
                    } else {
                        scanner.start(cameras[0]);
                    }
                } else {
					mui.alert('未找到摄像头', '欢迎使用扫码功能', function() {
					}); 
                }
            }).catch(function(e) {
				mui.alert('e', '欢迎使用扫码功能', function() {
				}); 
            });
        </script>
    </body>

</html>